import { LockOutlined, MobileOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Space, Form, Input, Tabs, theme } from "antd";
import { useState } from "react";
import styled from "styled-components";

const LoginWrapper = styled.div`
  margin: 20px 0 80px 0;
  .ant-tabs-nav-wrap {
    justify-content: center;
  }
  .login-top {
    text-align: center;
    margin-bottom: 45px;
  }
  .login-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    line-height: 44px;
    .logo {
      width: 44px;
      height: 44px;
      margin-inline-end: 16px;
      vertical-align: top;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      position: relative;
      inset-block-start: 2px;
      font-weight: 600;
      font-size: 33px;
    }
  }
  .login-desc {
    margin-block-start: 12px;
    margin-block-: 40px;
    color: rgba(42, 46, 54, 0.65);
    font-size: 14px;
  }
  .login-main {
    min-width: 328px;
    max-width: 580px;
    margin: 0 auto;
  }
  .login-form-wrapper {
    width: 300px;
    margin: 0 auto;
    .forget-psd {
      display: flex;
      justify-content: end;
      margin-top: -20px;
      margin-block-end: 5px;
    }
  }
  .login-footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
`;

const RegisterWrapper = styled.div`
  margin: 20px 0 80px 0;
  .ant-tabs-nav-wrap {
    justify-content: center;
  }
  .login-top {
    text-align: center;
    margin-bottom: 45px;
  }
  .login-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    line-height: 44px;
    .logo {
      width: 44px;
      height: 44px;
      margin-inline-end: 16px;
      vertical-align: top;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      position: relative;
      inset-block-start: 2px;
      font-weight: 600;
      font-size: 33px;
    }
  }
  .login-desc {
    margin-block-start: 12px;
    color: rgba(42, 46, 54, 0.65);
    font-size: 14px;
  }
  .register-main {
    min-width: 328px;
    max-width: 580px;
    margin: 0 auto;
  }
  .register-form-wrapper {
    width: 300px;
    margin: 0 auto;
  }
  .register-footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
`;

const tabsList = [
  {
    key: "email",
    label: "邮箱密码登录",
  },
  {
    key: "phone",
    label: "手机号登录",
  },
];
export default () => {
  const [loginType, setLoginType] = useState("email");
  const [isLogin, setIsLogin] = useState(false);
  const onTabsChange = (key) => {
    setLoginType(key);
  };

  return (
    <>
      {isLogin ? (
        <LoginWrapper>
          <div className="login-top">
            <div className="login-header">
              <span className="logo">
                <img
                  src="https://github.githubassets.com/favicons/favicon.png"
                  alt=""
                />
              </span>
              <span className="title">Cescesces</span>
            </div>
            <div className="login-desc">全球最大的代码托管平台</div>
          </div>
          <div className="login-main">
            <Tabs
              defaultActiveKey={loginType}
              items={tabsList}
              onChange={onTabsChange}
            />
            <div className="login-form-wrapper">
              <Form
                name="basic"
                initialValues={{
                  remember: true,
                }}
                autoComplete="off"
                size="large"
              >
                {loginType === "email" ? (
                  <>
                    <Form.Item
                      name="用户名"
                      rules={[
                        {
                          required: true,
                          message: "请输入用户名",
                        },
                      ]}
                    >
                      <Input
                        prefix={<UserOutlined />}
                        placeholder="请输入用户名"
                      />
                    </Form.Item>

                    <Form.Item
                      name="密码"
                      rules={[
                        {
                          required: true,
                          message: "请输入密码",
                        },
                      ]}
                    >
                      <Input.Password
                        prefix={<LockOutlined />}
                        placeholder="请输入密码"
                      />
                    </Form.Item>
                    <div className="forget-psd">
                      <Button type="link" primary>
                        忘记密码
                      </Button>
                    </div>
                  </>
                ) : (
                  <>
                    <Form.Item
                      name="手机号"
                      rules={[
                        {
                          required: true,
                          message: "请输入手机号",
                        },
                      ]}
                    >
                      <Input
                        prefix={<MobileOutlined />}
                        placeholder="请输入手机号"
                      />
                    </Form.Item>

                    <Form.Item
                      name="验证码"
                      rules={[
                        {
                          required: true,
                          message: "请输入验证码",
                        },
                      ]}
                    >
                      <Space direction="horizontal">
                        <Input
                          prefix={<LockOutlined />}
                          placeholder="请输入验证码"
                        />
                        <Button
                          style={{
                            width: 100,
                          }}
                        >
                          获取验证码
                        </Button>
                      </Space>
                    </Form.Item>
                    <div className="forget-psd">
                      <Button type="link" primary>
                        忘记密码
                      </Button>
                    </div>
                  </>
                )}

                <Form.Item label={null}>
                  <Button size="large" type="primary" block>
                    登录
                  </Button>
                </Form.Item>
              </Form>
            </div>
          </div>
          <div className="login-footer">
            没有账号？
            <Button onClick={() => {setIsLogin(false)}} type="link" primary style={{ padding: 0 }}>
              立即注册
            </Button>
          </div>
        </LoginWrapper>
      ) : (
        <RegisterWrapper>
          <div className="login-top">
            <div className="login-header">
              <span className="logo">
                <img
                  src="https://github.githubassets.com/favicons/favicon.png"
                  alt=""
                />
              </span>
              <span className="title">Cescesces</span>
            </div>
            <div className="login-desc">全球最大的代码托管平台</div>
          </div>
          <div className="register-main">
            <div className="register-form-wrapper">
              <Form
                name="basic"
                initialValues={{
                  remember: true,
                }}
                autoComplete="off"
                size="large"
              >
                <>
                  <Form.Item
                    name="用户名"
                    rules={[
                      {
                        required: true,
                        message: "请输入用户名",
                      },
                    ]}
                  >
                    <Input
                      prefix={<UserOutlined />}
                      placeholder="请输入用户名"
                    />
                  </Form.Item>

                  <Form.Item
                    name="密码"
                    rules={[
                      {
                        required: true,
                        message: "请输入密码",
                      },
                    ]}
                  >
                    <Input.Password
                      prefix={<LockOutlined />}
                      placeholder="请输入密码"
                    />
                  </Form.Item>
                  <Form.Item
                    name="重复密码"
                    rules={[
                      {
                        required: true,
                        message: "请输入重复密码",
                      },
                    ]}
                  >
                    <Input.Password
                      prefix={<LockOutlined />}
                      placeholder="请输入重复密码"
                    />
                  </Form.Item>
                  <Form.Item
                    name="手机号"
                    rules={[
                      {
                        required: true,
                        message: "请输入手机号",
                      },
                    ]}
                  >
                    <Input
                      prefix={<MobileOutlined />}
                      placeholder="请输入手机号"
                    />
                  </Form.Item>

                  <Form.Item
                    name="验证码"
                    rules={[
                      {
                        required: true,
                        message: "请输入验证码",
                      },
                    ]}
                  >
                    <Space direction="horizontal">
                      <Input
                        prefix={<LockOutlined />}
                        placeholder="请输入验证码"
                      />
                      <Button
                        style={{
                          width: 100,
                        }}
                      >
                        获取验证码
                      </Button>
                    </Space>
                  </Form.Item>
                </>

                <Form.Item label={null}>
                  <Button size="large" type="primary" block>
                    注册
                  </Button>
                </Form.Item>
              </Form>
            </div>
          </div>
          <div className="register-footer">
            已有账号？
            <Button onClick={() => {setIsLogin(true)}} type="link" primary style={{ padding: 0 }}>
              立即登录
            </Button>
          </div>
        </RegisterWrapper>
      )}
    </>
  );
};
